<template>
  <div @touchmove.stop  class="list box box-ver of-y-s">
    <div @click="callback(item)" v-for="(item, index) in result" :value="item" :key="index" class="item">{{item}}</div>
  </div>
</template>

<script>
import '../assets/css/mint.scss'
export default {
  name: 'shop-pick',
  props: {
    keyword: {
      type: String,
      default () {
        return ''
      }
    },
    callback: {
      type: Function,
      default () {}
    }
  },
  data () {
    return {
      list: [
        '哈根达斯',
        '必胜客',
        '鲜芋仙',
        '美味人生',
        '湘爵士2004中餐厅',
        '鹅夫人港式餐厅',
        '青瓦炭',
        '纽约薯条',
        '快乐柠檬',
        '幾個果子',
        '元气寿司',
        '酥妃皇后',
        '冰火楼',
        '甜品工房',
        '探鱼',
        '彼得家牧场',
        '丸龜制面',
        'Open Oven',
        '鹊茶',
        '猫迹料理',
        '陈周周蛋糕店',
        'CSA Code',
        '湊湊',
        '伍厚德堂',
        '安薇塔英国茶体系',
        '星巴克',
        '焱铁烧',
        '壹零伍单一麦芽威士忌俱乐部',
        '茶颜悦色',
        '知乎茶也',
        '鹿港小镇',
        'COVA',
        "L'SENNA Bakery",
        '金牌外婆家',
        '表叔茶餐厅',
        '宇治茶铺',
        "McDonald's",
        '香港生龍茶餐廳',
        '神虎拉面',
        '食悦天',
        '摆花街',
        '台蓋奶茶',
        '五湖小仙',
        '稻香',
        '满记',
        '味失'
      ],
      result: []
    }
  },
  mounted () {
    this.getResult('')
  },
  methods: {
    getResult (keyword) {
      let result = []
      if (keyword.length > 0) {
        this.list.forEach(item => {
          if (item.indexOf(keyword) > -1) {
            result.push(item)
          }
        })
      } else {
        result = this.list
      }
      // console.log(result)
      this.result = result
    }
  },
  watch: {
    keyword (curVal, oldVal) {
      this.getResult(curVal)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
.list {
  position: absolute;
  top:.8rem;
  left:1.92rem;
  background-color:#FFF;
  color:#333;
  width:4rem;
  z-index:5;
  max-height:3.6rem;
  border:1px solid #EEE;
  .item{
    padding:.15rem;
    border-bottom: 1px solid #EEE;
    &:last-child{
      border-bottom:none;
    }
  }
}
</style>
